import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:kkhousekeep/page/home/convenient/order/order_pending_controller.dart';
import 'package:kkhousekeep/tools/get_dialog_ext.dart';
import 'package:kkhousekeep/tools/toast_util.dart';

import '../../../../widget/bottom_confirm_bar.dart';
import '../../../../widget/custom_app_bar.dart';
import '../../../../widget/custom_table.dart';

class OrderPendingPage extends StatelessWidget {
  const OrderPendingPage({super.key});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
      child: GetBuilder<OrderPendingController>(
        init: OrderPendingController(),
        builder: (controller) => Scaffold(
          backgroundColor: const Color(0xFFf4f5f6),
          appBar: CustomAppBar("挂单"),
          body: SafeArea(
            left: false,
            right: false,
            child: Column(
              children: [
                Expanded(
                    child: SingleChildScrollView(
                      child: Container(
                        margin: EdgeInsets.only(top: 16.h),
                        color: Colors.white,
                        child: Obx(
                              () => Column(
                            mainAxisSize: MainAxisSize.min,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              _buildDetail(context, controller),
                              Text(
                                controller.fatalDesc.value,
                                textAlign: TextAlign.left,
                                style: TextStyle(
                                    fontSize: 32.sp,
                                    color: const Color(0xFF333333)),
                              ).marginOnly(left: 32.w, right: 32.w, bottom: 20.h),
                              buildDescriptionPicture(),
                              Container(
                                  color: const Color(0xFFf4f5f6), height: 2.h),
                              CustomTable.buildFormTitle("挂单说明", isRequired: true),
                              TextField(
                                maxLength: 50,
                                controller: controller.explainTextController,
                                decoration: InputDecoration(
                                  hintText: '请输入挂单说明',
                                  contentPadding: const EdgeInsets.symmetric(
                                      horizontal: 0, vertical: 0),
                                  isDense: true,
                                  counterStyle: TextStyle(
                                      color: (controller.explain.value.length == 50)
                                          ? const Color(0xFFDD5045)
                                          : const Color(0xFFCECECE),
                                      fontSize: 32.sp),
                                  border: InputBorder.none,
                                  hintStyle: TextStyle(
                                      color: const Color(0xFFCECECE),
                                      fontSize: 32.sp),
                                ),
                              ).marginOnly(left: 32.w, right: 32.w, bottom: 30.h),
                            ],
                          ),
                        ),
                      ),
                    )),
                buildBottomSheet(),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildDetail(
      BuildContext buildContext, OrderPendingController controller) {
    return CustomTable(
      children: [
        TableRow(children: [
          CustomTable.buildFormTitle("工单编号"),
          CustomTable.buildFormContent(controller.woSn.value)
              .marginOnly(left: 60.w),
        ]),
        TableRow(children: [
          CustomTable.buildFormTitle("故障类型"),
          CustomTable.buildFormContent(controller.fatalType.value)
              .marginOnly(left: 60.w),
        ]),
        TableRow(children: [
          CustomTable.buildFormTitle("报修地址"),
          CustomTable.buildFormContent(controller.address.value)
              .marginOnly(left: 60.w),
        ]),
        TableRow(children: [
          CustomTable.buildFormTitle("故障描述"),
          Container(),
        ]),
      ],
    );
  }

  buildDescriptionPicture() {
    OrderPendingController controller = Get.find();
    return GridView.builder(
      scrollDirection: Axis.vertical,
      shrinkWrap: true,
      padding: EdgeInsets.only(top: 12.h, bottom: 40.h),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        mainAxisSpacing: 24.h,
        crossAxisSpacing: 24.w,
      ),
      itemCount: controller.descImg.length,
      itemBuilder: (context, index) {
        return buildDescriptionPictureItem(controller.descImg[index]);
      },
    ).marginSymmetric(horizontal: 32.w);
  }

  buildDescriptionPictureItem(String imgUrl) {
    OrderPendingController controller = Get.find();
    return InkWell(
      child: CachedNetworkImage(
        imageUrl: imgUrl,
        imageBuilder: (context, imageProvider) => Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(
              Radius.circular(6.r),
            ),
            image: DecorationImage(
              fit: BoxFit.cover,
              image: imageProvider,
            ),
          ),
        ),
        placeholder: (context, url) => Container(
          color: Colors.grey,
        ),
        errorWidget: (context, url, error) => const Icon(Icons.error),
      ),
      onTap: () {
        if (imgUrl.isNotEmpty) {
          controller.clickImageItem(imgUrl);
        }
      },
    );
  }

  buildBottomSheet() {
    OrderPendingController controller = Get.find();
    return BottomConfirmBar(
      leftText: "取消",
      onTapLeft: () {
        Get.back();
      },
      rightText: "确定",
      onTapRight: () {
        if (controller.explain.value.isEmpty) {
          ToastUtils.showToast(tip: "请输入挂单说明");
          return;
        }
        showConfirmDialog();
      },
    );
  }

  void showConfirmDialog() {
    OrderPendingController controller = Get.find();
    Get.showCupertinoDialog(
      content: '请确认是否挂单',
      onRightTap: () {
        controller.pendingOrder();
      },
    );
  }
}
